import React, { Component, useState, useRef } from "react";
function Child1({ name1 }) {
  return (
    <>
      <h1>这是child1</h1>
      <p>接收的值：{name1}</p>
    </>
  );
}
function Child2({ name2, onChange }) {
  let iptRef = useRef();
  let handleUpdate = () => {
    onChange(iptRef.current.value);
  };
  return (
    <>
      <h1>这是child2</h1>
      <p>接收的值：{name2}</p>
      <input ref={iptRef} type="text" />
      <button onClick={handleUpdate}>child2中修改name1的值</button>
    </>
  );
}
export default function Father() {
  let [name1, setName1] = useState("name1");
  let [name2, setName2] = useState("name2");
  let updateName1 = (val) => {
    setName1(val);
  };
  return (
    <>
      <h1>这是父组件状态提升</h1>
      <Child1 name1={name1}></Child1>
      <Child2 name2={name2} onChange={updateName1}></Child2>
    </>
  );
}
